<template>
    <div class="vote-game" :class="{ 'fullscreen': isFullscreen }">
      <!-- 全局全屏切换按钮 -->
      <FullscreenToggle />
      
      <div class="game-header">
        <h1>你认为哪种手套可以让泡泡轻轻弹起？</h1>
      </div>
  
      <div class="game-grid">
        <!-- 左侧图标 -->
        <div class="left-icons">
          <div class="icon-question">❓</div>
          <div class="icon-search" style="margin-top: 3rem;">🔍</div>
        </div>
        
        <!-- 第一行：三种手套 -->
        <div class="gloves-row">
          <div 
            v-for="(glove, index) in gloves" 
            :key="index" 
            class="glove-item"
          >
            <div class="glove-image">
              <img 
                :src="glove.image"
                :alt="glove.name"
                @error="handleImageError"
              />
              <div class="glove-placeholder" v-if="!glove.image">
                <span>{{ glove.name }}</span>
              </div>
            </div>
            <!-- <h3 class="glove-name">{{ glove.name }}</h3> -->
          </div>
        </div>
  
        <!-- 第二行：投票功能 -->
        <div class="vote-row">
          <div 
            v-for="(glove, index) in gloves" 
            :key="index" 
            class="vote-item"
          >
            <!-- 星星展示框 -->
            <div class="stars-box">
              <div class="stars-display">
                <div 
                  v-for="(star, starIndex) in glove.stars" 
                  :key="starIndex"
                  class="star-item"
                  :class="{ 'star-animation': star.isNew }"
                >
                  ⭐
                </div>
                <!-- 投票成功动画 -->
                <div v-if="glove.showVoteEffect" class="vote-effect">⭐</div>
              </div>
            </div>
            
            <button 
              class="vote-btn"
              :class="{ 'disabled': gameEnded, 'clicked': glove.buttonClicked }"
              @click="vote(index)"
              :disabled="gameEnded"
            >
              <span class="btn-text">投票</span>
              <span class="btn-emoji">⭐</span>
              <span class="btn-length">{{ glove.stars.length }}</span>
            </button>
          </div>
        </div>
  
        <!-- 第三行：答案 -->
        <div class="answer-row">
          <div 
            v-for="(glove, index) in gloves" 
            :key="index" 
            class="answer-item"
          >
            <div class="answer-content">
              <div v-if="gameEnded && glove.showAnswer" class="answer-result">
                <div 
                  class="result-icon"
                  :class="glove.isCorrect ? 'correct' : 'incorrect'"
                >
                  {{ glove.isCorrect ? '✓' : '✗' }}
                </div>
                <!-- <span class="result-text">
                  {{ glove.isCorrect ? '正确' : '错误' }}
                </span> -->
              </div>
              <div v-else class="answer-placeholder">
                <span>&nbsp;</span>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 游戏控制 -->
      <div class="game-controls">
        <button 
          class="undo-btn"
          :class="{ 'disabled': voteHistory.length === 0 }"
          @click="undoLastVote"
          :disabled="voteHistory.length === 0 || gameEnded"
          title="撤销最后一次投票"
        >
          ↶
        </button>
        <button 
          class="reveal-btn"
          :class="{ 'disabled': totalVotes === 0 || currentAnswerIndex >= gloves.length }"
          @click="revealAnswers"
          :disabled="totalVotes === 0 || currentAnswerIndex >= gloves.length"
          :title="currentAnswerIndex >= gloves.length ? '游戏结束' : '揭示答案'"
        >
          {{ currentAnswerIndex >= gloves.length ? '🏁' : '💡' }}
        </button>
        <button 
          class="reset-btn"
          @click="resetGame"
          title="重新开始"
        >
          🔄
        </button>
      </div>
  
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import FullscreenToggle from '@/components/FullscreenToggle.vue'
  import { useFullscreen } from '@/composables/useFullscreen'
  
  // 手套数据
  const gloves = ref([
    {
      id: 1,
      name: '手套A',
      image: new URL('@/assets/images/1.jpg', import.meta.url).href,
      votes: 0,
      isCorrect: true, // 手套1是正确答案
      voteAnimation: false,
      showVoteEffect: false,
      buttonClicked: false,
      stars: [] // 星星数组
    },
    {
      id: 2,
      name: '手套B',
      image: new URL('@/assets/images/2.jpg', import.meta.url).href,
      votes: 0,
      isCorrect: true, // 手套2是正确答案
      voteAnimation: false,
      showVoteEffect: false,
      buttonClicked: false,
      stars: [] // 星星数组
    },
    {
      id: 3,
      name: '手套C',
      image: new URL('@/assets/images/3.jpg', import.meta.url).href,
      votes: 0,
      isCorrect: false, // 手套3是错误答案
      voteAnimation: false,
      showVoteEffect: false,
      buttonClicked: false,
      stars: [] // 星星数组
    }
  ])
  
  const gameEnded = ref(false)
  
  // 投票历史记录
  const voteHistory = ref([])
  
  // 使用全局全屏功能
  const { isFullscreen } = useFullscreen()
  
  // 计算属性
  const totalVotes = computed(() => {
    return gloves.value.reduce((total, glove) => total + glove.votes, 0)
  })
  
  const voteRate = computed(() => {
    // 由于可以多次投票，这里显示总票数而不是百分比
    return totalVotes.value
  })
  
  // 投票功能
  const vote = (index) => {
    if (gameEnded.value) return
    
    const glove = gloves.value[index]
    
    // 增加票数
    glove.votes++
    
    // 添加星星
    const newStar = {
      id: Date.now(),
      isNew: true
    }
    glove.stars.push(newStar)
    
    // 触发投票动画
    glove.voteAnimation = true
    glove.showVoteEffect = true
    glove.buttonClicked = true
    
    // 记录投票历史
    voteHistory.value.push({
      gloveIndex: index,
      gloveName: glove.name,
      timestamp: Date.now()
    })
    
    // 动画结束后重置状态
    setTimeout(() => {
      glove.voteAnimation = false
      glove.buttonClicked = false
    }, 600)
    
    setTimeout(() => {
      glove.showVoteEffect = false
      // 新星星动画结束后移除isNew标记
      newStar.isNew = false
    }, 1500)
  }
  
  // 当前要显示的答案索引
  const currentAnswerIndex = ref(0)
  
  // 揭示答案
  const revealAnswers = () => {
    if (totalVotes.value === 0) return
    
    // 如果是第一次点击，设置游戏结束状态和正确答案
    if (currentAnswerIndex.value === 0) {
      gameEnded.value = true
      
      // 手套1和手套2是正确答案，手套3是错误答案
      gloves.value.forEach((glove, index) => {
        glove.isCorrect = index === 0 || index === 1 // 手套A和手套B是正确答案
        glove.showAnswer = false // 初始隐藏答案
      })
    }
    
    // 显示当前答案
    if (currentAnswerIndex.value < gloves.value.length) {
      gloves.value[currentAnswerIndex.value].showAnswer = true
      currentAnswerIndex.value++
    }
  }
  
  // 撤销最后一次投票
  const undoLastVote = () => {
    if (voteHistory.value.length === 0 || gameEnded.value) return
    
    // 获取最后一次投票记录
    const lastVote = voteHistory.value.pop()
    
    // 减少对应手套的票数
    if (lastVote && gloves.value[lastVote.gloveIndex].votes > 0) {
      gloves.value[lastVote.gloveIndex].votes--
      
      // 移除最后一颗星星
      if (gloves.value[lastVote.gloveIndex].stars.length > 0) {
        gloves.value[lastVote.gloveIndex].stars.pop()
      }
    }
  }
  
  // 重置游戏
  const resetGame = () => {
    gameEnded.value = false
    voteHistory.value = []
    currentAnswerIndex.value = 0 // 重置答案索引
    gloves.value.forEach(glove => {
      glove.votes = 0
      glove.isCorrect = false
      glove.voteAnimation = false
      glove.showVoteEffect = false
      glove.buttonClicked = false
      glove.stars = [] // 清空星星
      glove.showAnswer = false // 重置答案显示状态
    })
  }
  
  // 处理图片加载错误
  const handleImageError = (event) => {
    event.target.style.display = 'none'
  }
  
  // 设置正确答案的方法（供外部调用）
  const setCorrectAnswer = (gloveIndex) => {
    gloves.value.forEach((glove, index) => {
      glove.isCorrect = index === gloveIndex
    })
  }
  
  
  // 暴露方法供父组件使用
  defineExpose({
    setCorrectAnswer
  })
  </script>
  
  <style lang="less" scoped>
  .vote-game {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    overflow-x: hidden;
    position: relative;
    
    &.fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
    }
  }
  
  
  .game-header {
    text-align: center;
    padding: 2rem;
    
    h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .game-description {
      font-size: 1.1rem;
      opacity: 0.9;
    }
  }
  
  .game-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 2rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  
  .left-icons {
    position: absolute;
    left: -60px;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 10;
    
    .icon-question {
      font-size: 4rem;
      color: #fbbf24;
      text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
      animation: iconFloat 3s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
      position: absolute;
      top: 16rem; // 对应第三行（答案行）的位置
      
      &:hover {
        transform: scale(1.2);
        text-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
      }
    }
    
    .icon-search {
      font-size: 3.5rem;
      color: #3b82f6;
      text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
      animation: iconFloat 3s ease-in-out infinite 1.5s;
      cursor: pointer;
      transition: all 0.3s ease;
      position: absolute;
      top: 24rem; // 对应答案行的位置
      
      &:hover {
        transform: scale(1.2);
        text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
      }
    }
  }
  
  .gloves-row,
  .vote-row,
  .answer-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .glove-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
  }
  
  .glove-image {
    width: 100%;
    height: 220px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
  
  .glove-placeholder {
    font-size: 3rem;
    opacity: 0.5;
  }
  
  .glove-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
  }
  
  .vote-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .stars-box {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    min-height: 60px;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.4);
    }
  }
  
  .vote-btn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    .btn-text {
      transition: all 0.3s ease;
    }
    
    .btn-emoji {
      font-size: 1.2rem;
      transition: all 0.3s ease;
      animation: bounce 2s infinite;
    }
    
    &:hover:not(.disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
      
      .btn-emoji {
        transform: scale(1.2) rotate(10deg);
      }
    }
    
    &.clicked {
      animation: buttonPulse 0.6s ease-out;
      
      .btn-text {
        transform: scale(1.1);
      }
      
      .btn-emoji {
        animation: emojiCelebrate 0.6s ease-out;
      }
    }
    
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  
  .stars-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    width: 100%;
  }
  
  .star-item {
    font-size: 1.5rem;
    transition: all 0.3s ease;
    
    &.star-animation {
      animation: starAppear 1.5s ease-out;
    }
  }
  
  .vote-effect {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fbbf24;
    font-size: 1.5rem;
    font-weight: bold;
    animation: voteEffectFloat 1.5s ease-out forwards;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
    pointer-events: none;
    z-index: 10;
  }
  
  .answer-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .answer-content {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    width: 100%;
  }
  
  .answer-placeholder {
    font-size: 3rem;
    opacity: 0.5;
  }
  
  .answer-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: answerReveal 0.6s ease-out;
  }
  
  .result-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    
    &.correct {
      background: #4ade80;
      color: white;
    }
    
    &.incorrect {
      background: #ef4444;
      color: white;
    }
  }
  
  .result-text {
    font-size: 1rem;
    font-weight: bold;
  }
  
  .game-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0 2rem;
  }
  
  .undo-btn,
  .reveal-btn,
  .reset-btn {
    padding: 1rem;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .undo-btn {
    background: linear-gradient(45deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    
    &:hover:not(.disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
    }
    
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  
  .reveal-btn {
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    
    &:hover:not(.disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
    }
    
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  
  .reset-btn {
    background: linear-gradient(45deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(107, 114, 128, 0.6);
    }
  }
  
  
  
  // 动画关键帧
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
    60% {
      transform: translateY(-3px);
    }
  }
  
  @keyframes buttonPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(255, 107, 107, 0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes emojiCelebrate {
    0% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.3) rotate(-10deg);
    }
    50% {
      transform: scale(1.2) rotate(10deg);
    }
    75% {
      transform: scale(1.3) rotate(-5deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }
  
  @keyframes numberBounce {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.3);
    }
    50% {
      transform: scale(0.9);
    }
    75% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes voteEffectFloat {
    0% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(0.5);
    }
    20% {
      opacity: 1;
      transform: translateX(-50%) translateY(-10px) scale(1.2);
    }
    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(-40px) scale(1);
    }
  }
  
  @keyframes iconFloat {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  
  @keyframes starAppear {
    0% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    50% {
      opacity: 1;
      transform: scale(1.5) rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(360deg);
    }
  }
  
  @keyframes answerReveal {
    0% {
      opacity: 0;
      transform: scale(0.5) translateY(20px);
    }
    50% {
      opacity: 1;
      transform: scale(1.1) translateY(-5px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .vote-game {
      padding: 0;
    }
    
    .game-header {
      padding: 1rem;
      
      h1 {
        font-size: 2rem;
      }
    }
    
    .game-grid {
      padding: 0 1rem 1rem;
      
      .left-icons {
        left: -40px;
        
        .icon-question {
          top: 12rem; // 移动端第三行位置
          font-size: 2rem;
        }
        
        .icon-search {
          top: 18rem; // 移动端答案行位置
          font-size: 2rem;
        }
      }
    }
    
    .gloves-row,
    .vote-row,
    .answer-row {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    
    .game-controls {
      flex-direction: column;
      align-items: center;
      padding: 0 1rem;
    }
    
    .stars-box {
      min-width: 100px;
      min-height: 50px;
      padding: 0.8rem;
    }
    
    .star-item {
      font-size: 1.3rem;
    }
    
    
  }
  </style>
  